import React from 'react';
import { connect } from 'dva';
import { ListView, Icon, List, Button, Grid, WhiteSpace } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import MyIcon from '../components/Base/MyIcon';
import FilterControl from '../components/Base/FilterControl';
import _ from 'lodash';
import styles from './PrecisionPage.css';


const Item = List.Item;
const Brief = Item.Brief;


class P extends React.Component {

  state = { branch_no: null };
  componentDidMount() {
    let {branchPickerValue}=this.props.stat;
    let {roles}=this.props;

    if (_.includes(roles, 'boss') || _.includes(roles, 'operator')){
      if(branchPickerValue.length){
        this.filterControlsChange(branchPickerValue);
      }
    }
  }
  componentWillUnmount() {
    this.setState({
      branch_no: null,
    });
  }

  filterControlsChange = (v) => {
    this.props.dispatch({ type: 'task/fetch', payload: { branchId: v[0] === '全部' ? '' : v[0] } });
    this.setState({
      branch_no: v,
    });
  };

  render() {
    const { dispatch, items } = this.props;
    const data1 = [
      {
        icon: <img alt="" src={require('../assets/1.png')} />,
        text: '新客转化',
        href: '/p1',
        data: items[0],
        type: 0,
      }];
    const data = [
      {
        icon: <img alt="" src={require('../assets/2.png')} />,
        text: '新客回头',
        href: '/p1',
        data: items[8],
        type: 8,
      },
      {
        icon: <img alt="" src={require('../assets/3.png')} />,
        text: '新客转惯',
        href: '/p1',
        data: items[9],
        type: 9,
      },
      {
        icon: <img alt="" src={require('../assets/11.png')} />,
        text: '老客复购',
        href: '/p1',
        data: items[10],
        type: 10,
      },
      {
        icon: <img alt="" src={require('../assets/6.png')} />,
        text: '沉睡唤醒',
        href: '/p1',
        data: items[3],
        type: 3,
      },
      {
        icon: <img alt="" src={require('../assets/4.png')} />,
        text: '流失挽回',
        href: '/p1',
        data: items[4],
        type: 4,
      },
      {
        icon: <img alt="" src={require('../assets/7.png')} />,
        text: '升阶升码',
        href: '/p50',
        data: _.concat(items[6], items[7]),
        type: 6,
      },
      {
        icon: <img alt="" src={require('../assets/5.png')} />,
        text: '成长关怀',
        href: '/p6',
        data: items[5],
        type: 5,
      },
      {
        icon: <img alt="" src={require('../assets/10.png')} />,
        text: '积分提醒',
        href: '/p1',
        data: items[11],
        type: 11,
      },
      {
        icon: <img alt="" src={require('../assets/8.png')} />,
        text: '定制任务',
        href: '/p1',
        data: items[101],
        type: 101,
      },
      {
        icon: <img alt="" src={require('../assets/12.png')} />,
        text: '疫苗提醒',
        href: '/p1',
        data: items[12],
        type: 12,
      },
      {
        icon: <img alt="" src={require('../assets/13.png')} />,
        text: '奶粉提醒',
        href: '/p1',
        data: items[13],
        type: 13,
      },
      {
        icon: <img alt="" src={require('../assets/14.png')} />,
        text: '纸尿裤提醒',
        href: '/p1',
        data: items[14],
        type: 14,
      },
    ];
    return (
      <Container title="精准营销">
        <FilterControl filterControlsChange={this.filterControlsChange} dispatch={this.props.dispatch} hidePickerDate={true} />
        <List renderHeader={() => {
          return(
            <div>

              <MyIcon
                type="trips" color="#ff2828" size="xxs"
                style={{ position: 'relative', top: 2, marginRight:8 }}
              />

              待跟进客户共：
              <span style={{color:"red"}}>{items.total} 人</span>
            </div>
          )
        }}>
          {data1.concat(data).map((item) => {
            let branch_no = _.get(this.state.branch_no, '[0]', null);
            return (
              <Item
                key={`${item.type}${item.href}`}
                onClick={() => {
                  dispatch(routerRedux.push({
                    pathname: item.href,
                    query: {
                      taskType: item.type,
                      total: item.data.length,
                      title: item.text,
                      branch_no: branch_no==='全部'?"": branch_no,
                    },
                  }));
                }}
                extra={item.data.length} arrow="horizontal" thumb={item.icon}
              >
                { item.text}
              </Item>
            );
          })}
        </List>
        {/*<WhiteSpace />
        <List>
          {data.map((item) => {
            return (
              <Item
                key={`${item.type}${item.href}`}
                onClick={() => {
                  dispatch(routerRedux.push({
                    pathname: item.href,
                    query: {
                      taskType: item.type,
                      total: item.data.length,
                      title: item.text,
                    },
                  }));
                }}
                extra={item.data.length} arrow="horizontal" thumb={item.icon}
              >
                { item.text}
              </Item>
            );
          })}
        </List>*/}
      </Container>
    );
  }
}
function mapStateToProps(state, props) {
  return { items: state.task, home: state.home, stat:state.stat, roles: state.auth.currentUser.roles, };
}
export default connect(mapStateToProps)(P);
